<template>
  <div class="container">
    <view class="textCenter">
      <view class="tips fz14">所有个人信息内容必填，您才能体验更好的服务。</view>
    </view>

    <view class="head flex justifyCenter" @click="uploadAvatar">
      <uv-image shape="circle" :src="counter.slParams.userInfo.logo" width="120px" height="120px" v-if="counter.slParams.userInfo.logo"></uv-image>
      <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285606303916368.png" width="120px" height="120px" v-else></uv-image>
      <view class="edit">
        <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285607490737724.png" width="45px" height="45px"></uv-image>
      </view>
    </view>

    <view class="cells">
      <view class="cell flex alignCenter">
        <view class="label fz16">姓名</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          <uv-input placeholder="请输入昵称" v-model="model.nickName" border="none"></uv-input>
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285615787383466.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="instance.refs.selectSexRef.open()">
        <view class="label fz16">性别</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{sex_format}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285617033787457.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="instance.refs.selectBirthdayRef.open()">
        <view class="label fz16">出生日期</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{birthday_format}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/11/17285764355189394.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="instance.refs.selectHeightRef.open()">
        <view class="label fz16">身高</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{height_format}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285617033787457.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="instance.refs.selectWeightRef.open()">
        <view class="label fz16">体重</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{weight_format}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285617033787457.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="instance.refs.selectAddressRef.open()">
        <view class="label fz16">籍贯</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{`${model.homeEconomize}${model.homeMarket}${model.homeCounty}`}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285617033787457.png" width="24px" height="24px"></uv-image>
        </view>
      </view>

      <view class="cell flex alignCenter" @click="chooseLocation">
        <view class="label fz16">先居住地</view>
        <view class="value fz14 flex alignCenter justifyBetween">
          {{`${model.city}${model.district}`}}
          <uv-image src="https://meet-city.oss-cn-beijing.aliyuncs.com/images/2024/10/10/17285615787383466.png" width="24px" height="24px"></uv-image>
        </view>
      </view>
    </view>

    <view class="actionBtn">
      <uv-button text="保存" @click="save" :loading="loading" shape="circle" color="linear-gradient(to bottom, #F66E96, #EE5C88)"></uv-button>
    </view>

    <selectSex ref="selectSexRef" v-model="model.sex"></selectSex>

    <selectBirthday v-model:birthday="model.birthday" v-model:constellation="model.constellation" ref="selectBirthdayRef"></selectBirthday>

    <selectHeight ref="selectHeightRef" v-model="model.height"></selectHeight>

    <selectWeight ref="selectWeightRef" v-model="model.weight"></selectWeight>

    <selectAddress ref="selectAddressRef" v-model:province="model.homeEconomize" v-model:city="model.homeMarket" v-model:district="model.homeCounty"></selectAddress>
  </div>
</template>

<script setup lang="ts">
//性别
import selectSex from "@/packagePages/my/completeInfo/components/selectSex.vue";
//生日
import selectBirthday from "@/packagePages/my/completeInfo/components/selectBirthday.vue";
//身高
import selectHeight from "@/packagePages/my/completeInfo/components/selectHeight.vue";
//体重
import selectWeight from "@/packagePages/my/completeInfo/components/selectWeight.vue";
//家乡
import selectAddress from "@/packagePages/my/completeInfo/components/selectAddress.vue";
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
const { proxy } = getCurrentInstance();
const instance = getCurrentInstance();

let loading = ref(false);
let model = ref({
  nickName: "",
  sex: "MAN",
  birthday: "",
  logoId: "",
  constellation: "", //星座
  height: 150,
  school: "", //毕业学校
  edu: "", //学历
  homeEconomize: "",
  homeMarket: "",
  homeCounty: "",
  industry: "", //行业,
  income: "", //收入
  lifePhotosId: "", //生活照
  cityLon: "",
  cityLat: "",
  city: "",
  district: "",
  reallyName: "",
  idCard: "",
  oneselfTags: "", //自我标签
  hisTags: "", //对方期望标签
  oneselfDescribe: "", //自我描述
  hisDescribe: "", //期望对方描述
  weight: "", //体重
  marriage: 2, //婚姻状况
  foreignCompanyName: "",
});

onShow(() => {
  uni.setNavigationBarColor({
    frontColor: "#000000", //文字颜色
    backgroundColor: "#F8F8FF", //底部背景色
  });
  getInfo();
  setHead();
});

let sex_format = computed(() => {
  if (model.value.sex == "MAN") {
    return "男";
  } else if (model.value.sex == 1) {
    return "男";
  } else {
    return "女";
  }
});

let weight_format = computed(() => {
  let height = model.value.weight.toString();
  if (height.includes("kg")) return model.value.weight;
  return model.value.weight + "cm";
});

let height_format = computed(() => {
  let height = model.value.height.toString();
  if (height.includes("cm")) return model.value.height;
  return model.value.height + "cm";
});

let birthday_format = computed(() => {
  if (model.value.birthday && model.value.constellation) {
    return `${model.value.birthday} | ${model.value.constellation}`;
  } else if (model.value.birthday) {
    return model.value.birthday;
  } else if (model.value.constellation) {
    return model.value.constellation;
  } else {
    return "";
  }
});

async function save() {
  try {
    loading.value = true;
    await proxy.$apis.loginReginfo(model.value);
    getInfo();
    proxy.$utils.showToast("保存成功");
    proxy.$utils.toLink("/pages/tabbar/tabbar-1/tabbar-1", "tab");
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

//设置头像
async function setHead() {
  let cropperUrl = counter.slParams.cropperUrl;
  if (!cropperUrl) return;
  let res = await counter.uploadHeadImgFile(cropperUrl);
  model.value.logoId = res.id;
  counter.setRelease("cropperUrl", null);
  getInfo();
}

async function getInfo() {
  await counter.getUserData();
  model.value = proxy.$utils.formatFunction(counter.slParams.userInfo, {
    ...model.value,
  });
  console.log("用户信息", model.value);
}

let uploadAvatar = async () => {
  let resp = await proxy.$auth.chooseImage();
  proxy.$utils.toLink(`/packagePages/func/pictureCropper?url=${resp[0]}`);
};

async function chooseLocation() {
  try {
    uni.showLoading({
      title: "获取当前定位中",
    });
    //let res = await proxy.$auth.chooseLocation();

    let resp;
    // #ifdef APP-PLUS
    let ret = await counter.permissionFunc("location");
    if (ret) resp = await counter.getPosition();
    // #endif

    // #ifndef APP-PLUS
    resp = await counter.getPosition();
    // #endif

    if (!resp) return;
    model.value.cityLon = resp.longitude;
    model.value.cityLat = resp.latitude;
    let address = await proxy.$atlas.getCityInfo(resp.longitude, resp.latitude);
    let { province, city, district } = address.addressComponent;
    if (
      proxy.$utils.isString(province) &&
      proxy.$utils.isString(city) &&
      province &&
      city
    ) {
      model.value.city = province;
      model.value.district = city;
    } else if (
      proxy.$utils.isString(province) &&
      proxy.$utils.isString(district) &&
      province &&
      district
    ) {
      model.value.city = province;
      model.value.district = district;
    }
  } catch (error) {
  } finally {
    uni.hideLoading();
  }
}
</script>


<style lang="scss">
page {
  background-color: #f8f8ff;
}
</style>
<style lang="scss" scoped>
.container {
  padding: 0 15px 50px;
  .tips {
    color: #f5a524;
    background: #fefce8;
    border-radius: 8px;
    padding: 5px 10px;
    display: inline-block;
  }
  .head {
    position: relative;
    width: 120px;
    margin: 15px auto 0;
    .edit {
      position: absolute;
      right: -10px;
      bottom: 0;
    }
  }
  .cells {
    margin-top: 35px;
    .cell {
      border-radius: 8px;
      padding: 10px 15px;
      background-color: white;
      margin-bottom: 15px;
      .label {
        width: 130px;
      }
      .value {
        width: 100%;
      }
    }
  }
  .actionBtn {
    margin-top: 30px;
  }
}
</style>